<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>报表生成</title>

  <link rel="stylesheet" type="text/css" href="easyui/themes/material/easyui.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/color.css">
  <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
  <script type="text/javascript" src="easyui/jquery.min.js"></script>
  <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

  <script type="text/javascript" src="web/amcharts/amcharts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.js"></script>
  <script type="text/javascript" src="web/echart/dist4.7/echarts.min.js"></script>

  <script src="web/JS/URLRooter.js"></script>
  <script src="web/JS/common.js"></script>
  <script src="report_generation.js"></script>
  <script src="./web/JS/html2canvas.js"></script>
  <script src="web/JS/pdf.js"></script>
  <style>
    .el-wrapper::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 4px;
      /*宽度竖滚动条的尺寸*/
      height: 4px;
      /*高度横滚动条的尺寸*/
    }

    .el-wrapper::-webkit-scrollbar-thumb {
      /*滚动条里面的条*/
      border-radius: 4px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #0DB0EC;
    }

    .el-wrapper::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 4px;
      background: #ffffff;
    }

    .textcontent {
      text-indent: 2em;
      line-height: 30px;
    }

    .littletitle {
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }

    .chartdiv {
      width: 50%;
      height: 200px;
    }

    .banxin {
      margin: 0 auto;
      width: 80%;
    }

    table {
      border-spacing: 0;
      /*把单元格间隙设置为0*/
      border-collapse: collapse;
    }
    td,th{
      border: 1px solid #ccc;
    }
  </style>
  <script>

  </script>
</head>

<body class="easyui-layout el-wrapper" class="main" style="overflow: auto;">
  <div class="banxin">
    <h1 style="text-align: center;height:60px;line-height:60px;">闪蒸气压缩机组数据挖掘服务报表</h1>
    <h3>1、报表时间：
      <input id="db_Start" type="text" class="easyui-datebox" style="width:200px;"
        data-options="labelWidth:100,labelAlign:'right'"> </input>至
      <input id="db_End" type="text" class="easyui-datebox" style="width:200px;"
        data-options="labelWidth:30,labelAlign:'right'"> </input>
    </h3>
    <h3>2、报表内容：闪蒸气压缩机组状态信息</h3>
    <h3>3、机组状态数据：</h3>
    <div class="textcontent">搜索时间段内一级压缩系统日最大温差为<span id="maxTempDifference1"></span>℃，日最大压差为<span
        id="maxPressureDifference1"></span>Kpag；二级压缩系统日最大温差为<span id="maxTempDifference2"></span>℃，时间为XXX,日最大压差为<span
        id="maxPressureDifference2"></span>Kpag；三级压缩系统日最大温差为<span id="maxTempDifference3"></span>℃,日最大压差为<span
        id="maxPressureDifference3"></span>Kpag。
    </div>
    <div class="textcontent">
      该时间段内各级压缩系统内各点位传感器数据反应如下所示：
    </div>
    <!-- 第一压缩机 -->
    <div class="textcontent littletitle">
      （1） 一级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
    </div>
    <div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv1" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv2" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">一级压缩机入口温度</div>
        <div style="width: 50%;text-align: center;">一级压缩机A出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv3" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv4" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">一级压缩机A出口温度</div>
        <div style="width: 50%;text-align: center;">一级压缩机B出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv5" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv6" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">一级压缩机B出口温度</div>
        <div style="width: 50%;text-align: center;">一级洗涤器压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv7" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv8" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">一级洗涤器液位</div>
        <div style="width: 50%;text-align: center;">一级后冷却器出口温度</div>
      </div>
    </div>
    <!-- 二级压缩机 -->
    <div class="textcontent littletitle">
      （2） 二级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
    </div>
    <div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv9" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv10" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">二级压缩机入口温度</div>
        <div style="width: 50%;text-align: center;">二级压缩机A出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv11" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv12" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">二级压缩机A出口温度</div>
        <div style="width: 50%;text-align: center;">二级压缩机B出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv13" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv14" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">二级压缩机B出口温度</div>
        <div style="width: 50%;text-align: center;">二级洗涤器压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv15" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv16" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">二级洗涤器液位</div>
        <div style="width: 50%;text-align: center;">二级后冷却器出口温度</div>
      </div>
    </div>
    <!-- 三级第一压缩机 -->
    <div class="textcontent littletitle">
      （3）三级压缩机系统内压缩机以及洗涤器、后冷却器的传感器监测数据反应如下图所示：
    </div>
    <div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv17" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv18" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第一压缩机入口温度</div>
        <div style="width: 50%;text-align: center;">三级第一压缩机A出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv19" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv20" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第一压缩机A出口温度</div>
        <div style="width: 50%;text-align: center;">三级第一压缩机B出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv21" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv22" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第一压缩机B出口温度</div>
        <div style="width: 50%;text-align: center;">三级第一洗涤器压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv23" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第一洗涤器液位</div>
      </div>
    </div>
    <!-- 三级第二压缩机 -->
    <div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv24" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv25" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第二压缩机入口温度</div>
        <div style="width: 50%;text-align: center;">三级第二压缩机A出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv26" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv27" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第二压缩机A出口温度</div>
        <div style="width: 50%;text-align: center;">三级第二压缩机B出口压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv28" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv29" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第二压缩机B出口温度</div>
        <div style="width: 50%;text-align: center;">三级第二洗涤器压力</div>
      </div>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv30" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">三级第二洗涤器液位</div>
      </div>
    </div>
    <h3>4、机组状态数据：</h3>
    <h3 style="text-indent: 2em;">无；</h3>
    <div class="textcontent">
      根据机组中各点位数据情况以及传感器报警监测结果，
      可得出该时间段内闪蒸气压缩机组各点位传感器共产生超出阈值报警2（序号判断）次，
      故障报警2（序号判断）次。
      详细信息如下表所示：
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">阈值报警信息表</div>
    <div style="width: 100%;margin:0 auto;">
      <table id="dg_DateList1"
        data-options="singleSelect:true,toolbar:'#tb01',border:false,rownumbers:true,fitColumns:true,nowrap:false">
        <thead>
          <tr>
            <th data-options="field:'almtime',width:200,align:'center'">时间</th>
            <th data-options="field:'custom0',width:200,align:'center'">报警位置</th>
            <th data-options="field:'custom1',width:200,align:'center'">报警类型</th>
            <th data-options="field:'almdesc',width:400,align:'center'">备注</th>
          </tr>
        </thead>
      </table>
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">故障报警信息表</div>
    <div style="width: 100%;margin:0 auto;">
      <table id="dg_DateList2"
        data-options="singleSelect:true,toolbar:'#tb01',border:false,rownumbers:true,fitColumns:true,nowrap:false">
        <thead>
          <tr>
            <th data-options="field:'almtime',width:200,align:'center'">时间</th>
            <th data-options="field:'custom0',width:200,align:'center'">故障位置</th>
            <th data-options="field:'custom1',width:200,align:'center'">故障类型</th>
            <th data-options="field:'almdesc',width:400,align:'center'">备注</th>
          </tr>
        </thead>
      </table>
    </div>
    <div style="height: 50px;line-height:50px;font-size:16px;font-weight:600;">故障1分析：</div>
    <div class="textcontent">
      <span id="time1"></span> 前后，
      系统监测分析得出
      <span id="problem">一级压缩机A出口温度数据、压力数据</span>
      在故障发生时明显异常变化，
      详细数据图表如下所示：
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">温度数据表</div>
    <div style="width: 70%;margin:0 auto;">
      <table style="margin:0 auto;">
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">12:00</th>
          <th style="width: 120px">12:10</th>
          <th style="width: 120px">12:20</th>
          <th style="width: 120px">12:30</th>
          <th style="width: 120px">12:40</th>
          <th style="width: 120px">12:50</th>
          <th style="width: 120px">13:00</th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
        </tr>
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">13:10</th>
          <th style="width: 120px">13:20</th>
          <th style="width: 120px">13:30</th>
          <th style="width: 120px">13:40</th>
          <th style="width: 120px">13:50</th>
          <th style="width: 120px">14:00</th>
          <th style="width: 120px"></th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;"></td>
        </tr>
      </table>
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">压力数据表</div>
    <div style="width: 70%;margin:0 auto;">
      <table style="margin:0 auto;">
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">12:00</th>
          <th style="width: 120px">12:10</th>
          <th style="width: 120px">12:20</th>
          <th style="width: 120px">12:30</th>
          <th style="width: 120px">12:40</th>
          <th style="width: 120px">12:50</th>
          <th style="width: 120px">13:00</th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
        </tr>
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">13:10</th>
          <th style="width: 120px">13:20</th>
          <th style="width: 120px">13:30</th>
          <th style="width: 120px">13:40</th>
          <th style="width: 120px">13:50</th>
          <th style="width: 120px">14:00</th>
          <th style="width: 120px"></th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;"></td>
        </tr>
      </table>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv31" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv32" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">温度数据</div>
        <div style="width: 50%;text-align: center;">压力数据</div>
      </div>
    </div>
    <div style="height: 50px;line-height:50px;font-size:16px;font-weight:600;">故障2分析：</div>
    <div class="textcontent">
      <span id="time1"></span>时，
      二级压缩系统中压缩机B出气口发生堵塞，对闪蒸汽压缩机组的正常运行产生严重的影响。
    </div>
    <div class="textcontent">
      且已根据系统诊断结果对闪蒸汽压缩机组的故障进行处理，确保机组恢复正常的运行状态。
    </div>
    <div class="textcontent">
      系统监测分析得出二级压缩机B出口温度数据、压力数据在故障发生时明显异常变化，详细数据图表如下所示：
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">温度数据表</div>
    <div style="width: 70%;margin:0 auto;">
      <table style="margin:0 auto;">
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">12:00</th>
          <th style="width: 120px">12:10</th>
          <th style="width: 120px">12:20</th>
          <th style="width: 120px">12:30</th>
          <th style="width: 120px">12:40</th>
          <th style="width: 120px">12:50</th>
          <th style="width: 120px">13:00</th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
        </tr>
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">13:10</th>
          <th style="width: 120px">13:20</th>
          <th style="width: 120px">13:30</th>
          <th style="width: 120px">13:40</th>
          <th style="width: 120px">13:50</th>
          <th style="width: 120px">14:00</th>
          <th style="width: 120px"></th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;"></td>
        </tr>
      </table>
    </div>
    <div style="text-align:center;font-size:16px;line-height:40px;height:40px;">压力数据表</div>
    <div style="width: 70%;margin:0 auto;">
      <table style="margin:0 auto;">
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">12:00</th>
          <th style="width: 120px">12:10</th>
          <th style="width: 120px">12:20</th>
          <th style="width: 120px">12:30</th>
          <th style="width: 120px">12:40</th>
          <th style="width: 120px">12:50</th>
          <th style="width: 120px">13:00</th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
        </tr>
        <tr style="width: 100%;">
          <th style="width: 9%;">时间</th>
          <th style="width: 120px">13:10</th>
          <th style="width: 120px">13:20</th>
          <th style="width: 120px">13:30</th>
          <th style="width: 120px">13:40</th>
          <th style="width: 120px">13:50</th>
          <th style="width: 120px">14:00</th>
          <th style="width: 120px"></th>
        </tr>
        <tr>
          <th>数据</th>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;">22</td>
          <td style="text-align: center;"></td>
        </tr>
      </table>
      <div style="width:  100%;padding: 0px;">
        <div id="chartdiv33" class="chartdiv" style="float: left;"></div>
        <div id="chartdiv34" class="chartdiv" style="float: left;"></div>
      </div>
      <div style="display: flex;clear: both;width: 100%;">
        <div style="width: 50%;text-align: center;">温度数据</div>
        <div style="width: 50%;text-align: center;">压力数据</div>
      </div>
    </div>
  </div>
  <div>
    <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:''" onclick="">报表生成</a>
  </div>
</body>

</html>
<script>
  function daochu() {
  }
</script>